<template>
  <div>
    <!--  搜索框-->
    <el-form :inline="true" :model="formInline" ref="formInline" style="padding-top: 30px">
      <el-form-item label="导航标题">
        <el-input v-model="formInline.articleContent" placeholder="导航标题"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.articleStatus" placeholder="状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="禁用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i>查询</el-button>
        <el-button type="primary" @click="Reset"><i class="el-icon-refresh"></i>重置</el-button>
        <el-button type="primary" @click="inserts"><i class="el-icon-refresh"></i>添加</el-button>
      </el-form-item>
    </el-form>

    <!--修改-->
    <el-dialog title="修改信息"  :visible.sync="upformarticleStatus" width="80%">
      <el-form ref="upform" :rules="uprules"  :model="upform"  >
        <el-form-item label="id" prop="articleId"  style="display: none" >
          <el-input v-model="upform.articleId" placeholder="id"></el-input>
        </el-form-item>
        <el-form-item label="导航标题" prop="articleContent">
          <el-input v-model="upform.articleContent" placeholder="导航标题" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="upform.sort" placeholder="排序" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                        <el-button @click="upquxiaoup">取 消</el-button>
                        <el-button type="primary" @click="upsaveupForm" >确 定</el-button>
                    </span>
    </el-dialog>

    <!--新增-->
    <el-dialog title="新增"  :visible.sync="informarticleStatus" width="80%">
      <el-form ref="inform" :rules="inrules" :model="inform"  >
        <el-form-item label="id" prop="articleId" style="display: none">
          <el-input v-model="inform.articleId" placeholder="id" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="导航标题" prop="articleContent">
          <el-input v-model="inform.articleContent" placeholder="导航标题" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                        <el-button @click="inquxiaoup">取 消</el-button>
                        <el-button type="primary" @click="insaveupForm" >确 定</el-button>
                    </span>
    </el-dialog>
    <!--文章管理-->
    <el-dialog title="文章管理"  :visible.sync="wenformarticleStatus" width="100%" >
      <el-form ref="wenform"  :model="wenform"  >
        <el-form-item label="文章标题" prop="articleContent"  >
          <el-input v-model="wenform.articleContent" placeholder="id"></el-input>
        </el-form-item>
        <el-form-item label="文章标题" prop="articleId"  style="display: none" >
          <el-input v-model="wenform.articleId" placeholder="id"></el-input>
        </el-form-item>
        <div class="edit_container" style="width: 100%;height: 100%">
          <!--  新增时输入 -->
          <quill-editor
              v-model="content"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
              @change="onEditorChange($event)">
          </quill-editor>
          <!-- 从数据库读取展示 -->
          <div v-html="str" class="ql-editor">
            {{str}}
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
                        <el-button @click="wenquxiaoup">取 消</el-button>
                        <el-button type="primary" @click="wensaveupForm" >确 定</el-button>
                    </span>
    </el-dialog>

    <!--  //表格-->
    <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="articleId"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="articleId"
          label="序号"
          sortable
          >
      </el-table-column>
      <el-table-column
          prop="articleContent"
          label="导航"
          sortable
          >
      </el-table-column>
      <el-table-column
          prop="sort"
          label="排序">
      </el-table-column>
      <el-table-column
          prop="articleStatus"
          label="状态">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.articleStatus"
              active-color="#13ce66"
              :active-value="0"
              :inactive-value="1"
              active-text="启用"
              inactive-text="禁用"
              @change="changearticleStatus(scope.row.articleId,scope.row.articleStatus)"
              inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="danger" size="small">删除</el-button>
          <el-button type="primary" size="small" @click="fenchengClick(scope.row)">修改</el-button>
          <el-button @click="insertzi(scope.row)" v-if="scope.row.children.length>0" type="success" size="small">添加</el-button>
          <el-button @click="xiangqing(scope.row)" v-if="scope.row.children.length==0" type="success" size="small">文章管理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
  name: "articles",
  components: {
    quillEditor
  },
  data(){
    return {
      //富文本
      content: "",
      str: '',
      editorOption: {},

      //搜索框对象
      formInline:{},
      //表个对象
      tableData:[],
      //分页
      currentPage:1,
      pageSize:5,
      total:0,
      //修改框状态
      upformarticleStatus:false,
      //修改框对象
      upform:{},

      //新增框状态
      informarticleStatus:false,
      //新增对象
      inform:{},
      //文章管理状态
      wenformarticleStatus:false,
      //文章对象
      wenform:{},

      //文章的内容
      names:[],
      inrules:{
        articleContent:[
          { required: true, message: '请输入导航标题', trigger: 'blur' },
        ],

      },
      uprules:{
        articleContent:[
          { required: true, message: '请输入导航标题', trigger: 'blur' },
        ],

        sort:[
          { required: true, message: '请选择排序', trigger: 'blur' },
        ]
      },

    }
  },
  created() {
    this.init();
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  mounted() {
    let content = '';  // 请求后台返回的内容字符串
    this.str = this.escapeStringHTML(content);
  },

  methods:{
    onEditorReady(editor) { // 准备编辑器
    },
    onEditorBlur(){}, // 失去焦点事件
    onEditorFocus(){}, // 获得焦点事件
    onEditorChange(){
      // console.log(this.content)
      var con =[];
      var s=this.content.split("<br>");
      for (let i = 0; i < s.length; i++) {
        var c=s[i].split("<p>")

      }
      for (let i = 0; i < c.length; i++) {
        var d=c[i].split("</p>")
        // console.log(d[0])
        con[i]=d[0]
      }
      // console.log(con)
      this.names=con;
    }, // 内容改变事件
    // 转码
    escapeStringHTML(str) {
      str = str.replace(/&lt;/g,'<');
      str = str.replace(/&gt;/g,'>');
      return str;
    },

    init(){
      var that = this;
      this.$http.post('/home/article/getAllartic/'+this.currentPage+"/"+this.pageSize,this.formInline).then(function (resp){
        that.tableData=resp.data.result.records
        that.total=resp.data.result.total
      })
    },
    //分页改变
    handleSizeChange(val) {
      this.pageSize=val;
      this.init();
    },
    handleCurrentChange(val) {
      this.currentPage=val;
      this.init();
    },
    //搜索=======================================================
    //查询按钮
    onSubmit(){
      this.init();
    },

    //重置按钮
    Reset(){
      this.$refs.formInline.resetFields();
      this.formInline={}
    },
    //新增
    inserts(){

      // console.log(this.$refs)
      // this.$refs.inform.resetFields()
      this.inform={};
      this.informarticleStatus=true;


    },
    //新增子菜单
    insertzi(item){
      this.informarticleStatus=true;
      this.inform=item;
      this.inform.articleContent=""
    },
    //文章管理
    xiangqing(item){
      // console.log(item)
      this.content="";
      var that=this;
      this.$http.get("/home/article/findArticleById?articleId="+item.articleId).then(function (resp){
        if(resp.data.code==200){
          // console.log(resp.data.result)
          that.wenform.articleContent=item.articleContent;
          that.wenform.articleId=item.articleId
          var list=resp.data.result;

          for (let i = 0; i < list.length; i++) {

            that.content+='<p>'+list[i].name;
            that.content+='</p>'
          }

          that.wenformarticleStatus=true;
        }
      })
    },

    //文章取消
    wenquxiaoup(){
      this.wenform={}
      this.$refs.wenform.resetFields();
      this.wenformarticleStatus=false;
    },
    //文章曲儿
    wensaveupForm(){
    // console.log(this.wenform.articleId)
    // console.log(this.names)
      var that = this
      this.$http.post("/home/article/findbottomByArticleId",{list:this.names,id:this.wenform.articleId}).then(function (resp){
        if(resp.data.code==200){
          that.init()
          that.$refs.wenform.resetFields();
          that.wenform={};
          that.wenformarticleStatus=false;
        }
      })
    },
    //表格方法============================================================
    //删除
    handleClick(item){
      var that = this
      this.$http.get("/home/article/deleteById?id="+item.articleId).then(function (resp){
        if(resp.data.code==200){
          that.init()
        }
      })
    },
    //修改
    fenchengClick(item){
      this.upform=item;
      this.upformarticleStatus=true
    },
    //修改状态
    changearticleStatus(id,articleStatus){
      var that = this;
      this.$http.get('/home/article/updateHeadNavarticleStatus?articleId='+id+"&articleStatus="+articleStatus).then(function (resp) {
        if(resp.data.code==200){
          that.init()
        }
      })
    },
    //修改取消
    upquxiaoup(){
      this.upformarticleStatus=false;
      this.upform={};
      this.$refs.upform.resetFields();
    },
    //修改确认
    upsaveupForm(){
      var that = this;

      this.$refs.upform.validate((valid) => {
        if (valid) {
          this.$http.post(`/home/article/updteArtic`,this.upform).then(function (resp){
            if(resp.data.code==200){
              that.init()
              that.upformarticleStatus=false;
              that.upform={};
              that.$refs.upform.resetFields();
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    //新增====================================================
    inquxiaoup(){
      this.informarticleStatus=false;
      this.$refs.inform.resetFields();
      this.inform={};
    },
    insaveupForm(){
      var that = this;
      this.$refs.inform.validate((valid) => {
        if (valid) {
          this.$http.post(`/home/article/insertArtic`,this.inform).then(function (resp){
            if(resp.data.code==200){
              that.init()
              that.informarticleStatus=false;
              that.inform={};
              // that.$refs.xinzeng.resetFields();
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },

  }
}
</script>

<style scoped>
.ql-editor > p{
  padding-bottom: 50px;
}
</style>